<template>
  <div class="hazarddisposal">
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon1.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.checkDtl.cnt }} <span>条</span>
          </div>
          <div class="item-type">已处置</div>
        </div>
      </div>
    </div>
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon2.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.noCheckDtl.zoneCnt || 0 }} <span>条</span>
          </div>
          <div class="item-type">区级处置</div>
        </div>
      </div>
    </div>
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon3.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.noCheckDtl.cnt }} <span>条</span>
          </div>
          <div class="item-type">待处置</div>
        </div>
      </div>
    </div>
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon4.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.noCheckDtl.cityCnt || 0 }} <span>条</span>
          </div>
          <div class="item-type">市级处置</div>
        </div>
      </div>
    </div>
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon5.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.checkDtl.day }}<span>天</span> {{ data.checkDtl.hour
            }}<span>时</span> {{ data.checkDtl.minute }}<span>分</span>
          </div>

          <div class="item-type">平均处置时效</div>
        </div>
      </div>
    </div>
    <div class="hazarddisposal-item">
      <div class="item-count">
        <img src="@/assets/images/icon6.png" alt="" />
        <div class="count-content">
          <div class="num" style="color: #02bec8">
            {{ data.noCheckDtl.provinceCnt || 0 }}<span>条</span>
          </div>
          <div class="item-type">省级处置</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

let data = ref({
  checkDtl: {},
  noCheckDtl: {},
});

const accept = (info) => {
  data.value = info;
};

defineExpose({ accept });
</script>

<style scoped lang="scss">
.hazarddisposal {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  padding: 0px 10px 8px 10px;
  .hazarddisposal-item {
    width: 49%;
    height: 33%;
    background: url("@/assets/images/disposal.png");
    background-size: 100% 100%;
    padding: 6px 10px 5px 17px;
    .item-count {
      display: flex;
      align-items: center;
      height: 100%;
      .count-content {
        margin-left: 32px;
        margin-top: 5px;
        width: 80%;
        span {
          font-size: 12px;
          margin-left: 2px;
          color: #646b75;
        }
        .num {
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 5px;
        }
        .item-type {
          font-size: 12px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
